<template>
	<view class="page flex-col">

		<view class="group_3 flex-col">
			<view class="image-text_1 flex-row ">
				<view class="group_4 flex-col">
					<image :src="pageData.image" mode=""></image>
				</view>
				<view class="text-group_1 flex-col">
					<view class="text-wrapper_1 flex-row ">
						<text class="text_6">{{pageData.name}}</text>
						<text class="text_7">{{pageData.title}}</text>
					</view>
					<text class="text_8" v-for="(item,index) in pageData.tag" :key="index">{{item}}</text>
				</view>
			</view>
			<view class="image_6">

			</view>
			<view class="group_5 flex-row justify-between">
				<view class="text-group_2 flex-col">
					<text class="text_9">就诊医院科室</text>
				</view>
				<view class="text-group_3 flex-col">
					<text class="text_12">{{pageData.hospitalName}}-{{pageData.categoryName}}</text>
				</view>
			</view>
			<view class="group_5 flex-row justify-between">
				<view class="text-group_2 flex-col">
					<text class="text_9">预约时间</text>
				</view>
				<view class="text-group_3 flex-col">

					<text class="text_12">{{upPageData.bookDate}}{{upPageData.timeType}}</text>
				</view>
			</view>
			<view class="group_5 flex-row justify-between">
				<view class="text-group_2 flex-col">
					<text class="text_9">医事服务费</text>
				</view>
				<view class="text-group_3 flex-col">
					<text class="text_12">{{upPageData.price}}元</text>
				</view>
			</view>
			<view class="image_7">

			</view>
			<view class="text-wrapper_2 flex-row justify-between">
				<text class="text_15 bc">门诊预约挂号须知</text>
				<text class="text_16">(预约即代表同意以下规则)</text>
			</view>
			<text class="paragraph_1">
				1.医事服务费由医院设定本平台不收取任何
			</text>
			<text class="paragraph_1">
				2.停诊将短信通知，请保持手机畅通

			</text>
			<text class="paragraph_1">
				3.实名制预约，就诊人信息不符将无法取号
			</text>

		</view>
		<view class="group_6 flex-col">
			<view class="text-wrapper_3 flex-row justify-between">
				<text class="text_17">选择就诊人</text>
				<text class="text_18 bc" @click="addPeple">添加就诊人</text>
			</view>
			<view class="block_1 flex-row ">
				<view class="block_2 flex-row " v-for="(item,index) in visitorList" @click="activePepleBtn(item,index)"
					:class="activePepleIndex==index?'activePeple':''">
					<view class="text-group_4 flex-col">
						<text class="text_19">{{item.name}}</text>
						<text class="text_20">{{item.gender==1?'女':'男'}}性&nbsp;{{item.age}}岁</text>
					</view>

					<image class="label_1" @click="cleaPeple(item,index)" src="../../static/com/icon_sc.png" mode="">
					</image>
				</view>

			</view>


			<!-- <view class="image_9">

			</view>
			<view class="text-wrapper_4 flex-row justify-between">
				<text class="text_31">预留电话</text>
			</view>
			<view class="block_3 flex-row">
				<uni-easyinput v-model="submitDta.phone" placeholder="请输入" />
				
				<text class="text_34" @click="getCode" v-if="isShowTRime==true">
					获取验证码
				</text>
				
				<text class="text_34" v-else>
					{{countdown}}秒之后再获取

				</text>

			</view>

			<view class="text-wrapper_4 flex-row justify-between">
				<text class="text_31">手机验证码</text>
			</view>

			<view class="text-wrapper_5 flex-row justify-between">
				<uni-easyinput v-model="submitDta.code" placeholder="请输入验证码" />

			</view> -->
			<view class="image_10">

			</view>

		</view>
		<view class="ding">

		</view>
		<view class="text-wrapper_6 bb flex-col" @click="submit()">
			<text class="text_35">立即预约</text>
		</view>
		<payment :payMode='payMode' :pay_close="pay_close" types="9" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='upPageData.discountPrice'></payment>
		<uni-popup ref="popup" type="center">
			<view class="baseFormWrap">
				<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">

					<uni-forms-item label="就诊人姓名" required name="name" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="就诊人年龄" required name="age" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="就诊人性别" required name="gender" :labelWidth='100'>
						<uni-data-checkbox v-model="baseFormData.gender" :localdata="sexs" />
					</uni-forms-item>


					<uni-forms-item label="身份证号" required name="idCard" :labelWidth='100'>
						<uni-easyinput v-model="baseFormData.idCard" placeholder="请输入" />
						<!-- <uni-data-checkbox v-model="baseFormData.gender" :localdata="sexs" /> -->
					</uni-forms-item>
					<uni-forms-item label="是否由医保" required name="hasInsurance" :labelWidth='100'>
						<uni-data-checkbox v-model="baseFormData.hasInsurance" :localdata="isYb" />

						<uni-easyinput v-if="baseFormData.hasInsurance==true" v-model="baseFormData.insuranceNo"
							placeholder="请输入医保卡号" />
					</uni-forms-item>


				</uni-forms>
				<view class="flex-row justify-between">
					<view class="submit-btn submit-btn1" @click="qxAddPeple('baseForm')">
						取消添加
					</view>
					<view class="submit-btn submit-btn2" @click="submitAddPeple('baseForm')">
						确定添加
					</view>

				</view>

			</view>

		</uni-popup>
	</view>
</template>
<script>
	import payment from '@/components/payment/index.vue'
	import {

		registerVerify,
		getUserInfo,

	} from "@/api/user";

	import {
		book,
		getBookDetail,
		getDoctorDetail,
		addVisitor,
		getVisitor,
		delVisitor
	} from '@/api/togeterRich/family.js'
	export default {
		components: {
			payment
		},
		data() {

			return {
				orderNo: '',
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				allPrice: 0,
				preOrderNo: '',
				countdown: 60,
				visitorList: [],
				pageData: {},
				did: '',
				upPageData: {},
				submitDta: {
					phone: '',
					idCard: '',
					hasInsurance: true,
					insuranceNo: '',
					code: ''
				},
				activePepleIndex: 0,
				lists: [],
				baseFormData: {
					age: '',
					name: '',
					gender: 0
				},
				isYb: [{
					text: '是',
					value: true
				}, {
					text: '否',
					value: false
				}],
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				rules: {

					idCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号必填'
						}]
					},
					hasInsurance: {
						rules: [{
							required: true,
							errorMessage: '必填'
						}]
					},
					insuranceNo: {
						rules: [{
							required: true,
							errorMessage: '必填'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '性别不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},


				},
				visitorData: {},
				isShowTRime: true
			};
		},
		onLoad(e) {

			this.did = e.id
			this.upPageData = JSON.parse(e.data);
			this.init()
			this.getVisitorList()
			uni.hideLoading()
		},
		methods: {
			init() {
				let data = {
					id: this.did
				}
				getDoctorDetail(data).then(res => {
					console.log(res, 'www')
					this.pageData = res.data

				})
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})


			},
			getVisitorList() {
				let data = {
					visitorType: 9,
				}
				getVisitor(data).then(res => {
					this.visitorList = res.data
					if (this.visitorList.length != 0) {
						this.visitorData = this.visitorList[0]
					}

					console.log(res, 'resres')
				})
			},
			getCode() {
				this.startCountdown()
				registerVerify(this.submitDta.phone).then(rews => {
					console.log(rews, 'rews')

					// this.sendCode();
				})

			},
			startCountdown() {

				// this.countdown = 60; // 设置倒计时初始值
				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.isShowTRime = false
						this.countdown--; // 每秒减1
					} else {
						this.isShowTRime = true

						clearInterval(timer); // 倒计时结束，清除定时器
						this.countdown = 60
					}

				}, 1000);
			},
			onChangeFun: function(e) {
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({

									url: '/pagesB/hospital/index?status=-1'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				} else {

				}
				this.$set(this, 'pay_close', false);

			},

			submit() {
				let that = this;
				this.submitDta.doctorId = this.pageData.id
				this.submitDta.visitorId = this.visitorData.id
				this.submitDta.payPrice = this.upPageData.discountPrice
				this.submitDta.doctorTimeId = this.upPageData.id

				this.submitDta.payType = "yue"
				// if (!this.submitDta.phone) return that.$util.Tips({
				// 	title: '请填写手机号码'
				// });
				// if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(!this.submitDta.phone)) return that.$util.Tips({
				// 	title: '请输入正确的手机号码'
				// });
				book(this.submitDta).then(resss => {
					console.log(resss, 'resssresssresss')
					this.orderNo = resss.data.orderNo
					this.goPay()
				})
				// console.log(this.submitDta, 'submitDtasubmitDta')
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			// submitDta: {
			// 	lists: [],
			// 	pIdCard: '',
			// 	isYb: 0,
			// 	ybCode: '',
			// 	code: ''
			// },
			activePepleBtn(item, index) {
				this.visitorData = item
				this.activePepleIndex = index
			},
			cleaPeple(item, index) {

				let data = {
					id: item.id,
					visitorType: 9,
				}
				delVisitor(data).then(res => {
					this.getVisitorList()
				})
				// this.submitDta.lists.splice(index, 1)
			},
			qxAddPeple() {
				this.baseFormData = {}

				this.$refs.popup.close()
			},
			submitAddPeple() {
				console.log(this.baseFormData, '1baseFormData')
				this.$refs['baseForm'].validate().then(res => {
					console.log(res, '这是啥呢？')

					this.baseFormData.visitorType = 9
					addVisitor(this.baseFormData).then(ress => {
						uni.showToast({
							title: "添加成功",
							icon: "none"
						})
						this.getVisitorList()
						this.$refs.popup.close()
					})

				})
			},

			addPeple() {
				this.baseFormData = {}
				this.$refs.popup.open()
			}
		},
	};
</script>
<style>
	@import 'com/css/doctorPay.css';
	@import '@/com/css/common.css';

	.bc {
		color: $maincolor !important;
	}

	.bgb {
		border: 2rpx solid $maincolor !important;
	}

	.bb {
		background: $maincolor;
	}

	.activePeple {
		border: 4rpx solid $maincolor !important;
		color: $maincolor !important;
	}

	.submit-btn1 {
		background: #fff;
		color: #000;
	}

	.submit-btn2 {
		background: #819453;
		color: #fff;
	}

	.submit-btn {
		width: 43%;
		border: 1rpx solid;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 20rpx;

	}

	.baseFormWrap {
		padding: 30rpx;
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
	}
</style>